<template>
  <div id="userOrgEdit" >
    <Modal v-model="show"  :title="$t('add_organization_role')"  width="800px" :mask-closable="false" :footer-hide=true >
      <Alert show-icon>{{$t('note')}}
        <template slot="desc">{{$t('multi_role_org')}}</template>
      </Alert>
      <Card style="width:100%">
        <Table stripe  :data="tableData" :columns="columns">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="default"  :Title="$t('edit')" icon="md-create" style="margin-right: 5px" @click="edit(row)"></Button>
            <Button type="default"  :title="$t('delete')" icon="md-trash" v-if="!row.isOwerOrg" style="margin-right: 5px" @click="remove(row)"></Button>
          </template>
        </Table>
      </Card>
      <div class="panel_nav">
        <div class="btn_nav_left"><Button type="success" icon="ios-add" @click="add">{{$t('add_org')}}</Button></div>
<!--        <div class="btn_nav_right"><Button v-show="modal.action!='VIEW'" type="primary"  @click="save" >提交</Button></div>-->
        <div class="btn_nav_right"><Button @click="close" >{{$t('save')}}</Button></div>
      </div>
    </Modal>

    <Modal v-model="modal.show"  :loading="modal.loading" :title="$t('add_org')"  width="500px" :closable="false" :footer-hide=true>
      <Form :model="rowData" label-position="right" :label-width="80">
        <FormItem :label="$t('organization')">
          <OrganizationTree v-show="!rowData.isOwerOrg" ref="editUserOrg" v-model="rowData.orgId" width="200px"/>
          <Input disabled v-show="rowData.isOwerOrg" v-model="rowData.orgShortName"></Input>
        </FormItem>
        <FormItem :label="$t('role')">
          <Select v-model="rowData.roleId" :placeholder="$t('role')">
            <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <div style="float: right;">
            <Button v-show="modal.action!='VIEW'" type="primary"  @click="save" >{{$t('save')}}</Button>
            <Button @click="cancel">{{$t('cancel')}}</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {queryListUserOrg,addUserOrg,updateUserOrg,removeUserOrg} from '@/api/UserOrganization';
import Role from '@/api/role';
import OrganizationTree from '@/components/topnav/OrganizationTree';
import {apiResult} from "@/libs/util";
export default {
  name:"userOrgEdit",
  components: {OrganizationTree},
  computed:{
    columns(){
      return[{title: this.$t('operate'), key: 'name', width: 150,slot:'action'},
        {title: this.$t('organization'), key: 'orgShortName',  width: 180},
        {title: this.$t('role'), key: 'roleCode',  width: 180},
        {title: this.$t('discription'), key: 'roleName',  width: 200},]
    }
  },
  data(){
    return{
      roleApi: new Role(),
      user:null,
      row:null,
      show:false,
      rowData:{id:null,userId:null,orgId:null,roleId:null,orgCode:null,orgShortName:null,roleCode:null,roleName:null,isOwerOrg:false},
      tableData:[],
      roleList:[],
      callback:null,

      //新增子窗口
      modal:{
        show:false,
        loading:false,
      },
      orgDatas:{
        show:false,
        loading:false,
      },

    }
  },
  methods:{
    openDialog: function (row, callback) {
      //console.log(">>>> UserOrgEdit.openDialog: row=%o",row)
      this.show=true;
      this.callback = callback;
      this.user = row;
      this.row = row;
      this.getData();
      this.getRoles();

    },
    add(){
      this.rowData.id=null;
      this.rowData.userId=this.user.id;
      this.rowData.roleId=null;
      this.rowData.orgId=null;
      this.modal.show = true;
    },
    edit(row){
      this.rowData.id=row.id;
      this.rowData.userId=row.userId;
      this.rowData.roleId=row.roleId;
      this.rowData.orgId=row.orgId;
      this.rowData.isOwerOrg=row.isOwerOrg;
      this.rowData.orgShortName=row.orgShortName;
      this.modal.show = true;

    },

    save(){
      if (!!!this.rowData.orgId){
        this.$Message.error(this.$t('organization_must_be_enter'));
        return;
      }
/*      if (!!!this.rowData.userId){
        this.$Message.error("组织机构必须选择！");
        return;
      }*/

      /** 新增 */
      if (this.rowData.id == null){
        addUserOrg(JSON.stringify(this.rowData)).then(res => {
          apiResult(res.data,true,result=>{
            this.modal.show =false;
            this.getData()
          });
        })
      }else{
        /** 修改 */
        updateUserOrg(JSON.stringify(this.rowData)).then(res => {
          apiResult(res.data,true,result=>{
            this.modal.show =false;
            this.getData()
          });
        })
      }
    },
    remove(row) {
      this.$Modal.confirm({
        title: this.$t('delete_confirm'),
        content: this.$t('delete_make_sure'),
        onOk: () => {
          removeUserOrg(JSON.stringify({id: row.id})).then(res => {
            apiResult(res.data,true,result=>{
              this.getData()
            });
          })
        },
      });
    },
    cancel(){
      this.modal.show = false;
    },
    getData() {
      queryListUserOrg(JSON.stringify({userId: this.user.id})).then(res => {
        this.tableData = [];
        apiResult(res.data,false,result=>{
          this.tableData = result.data;
          this.tableData.forEach(item=>{
            if (this.user.orgId == item.orgId){
              item['isOwerOrg']=true;
            }else{
              item['isOwerOrg']=false;
            }
          })
        });
      })
    },
    getRoles(){
      /** 初始化数据，查询所有角色*/
      this.roleApi.queryList().then(res=>{
          apiResult(res.data,false,result=>{
            this.roleList=[];
            for(let i in res.data.data){
              this.roleList.push({
                value:res.data.data[i].id,
                label:res.data.data[i].code});
            }
          });
      })
    },
    close(){
      this.show=false;
      if (!!this.callback){this.callback();}
    },
  },

}
</script>

<style lang="less">
.panel_nav{
  width: 100%;
  height: 32px;
  margin-top: 5px;
}

.btn_nav_right {
  width: 60px;
  height: 32px;
  float: right;
  margin-right: 5px;
}
.btn_nav_left {
  width: 60px;
  height: 32px;
  float: left;
  margin-left: 5px;
}


@import ".././template";
</style>
